input mode UserScript

使い方もここを参照。

CSSを書き換えたかったので勝手に改造しました。すいません。

script.js

スクリプトの本体。

style.css

編集モードを有効化している時のアイコンのCSS。

黒：入力モード

青：編集モード

赤：エラー（もう一度ボタンを押してください）

https://scrapbox.io/files/611634bdc547da00233af58b.png

色の変更方法は以下のサイトを参考にした。

トップページに遷移後、再度記事を開いたときにアイコンの状態が変わってしまう問題がある。

Scrapbox自体が勝手にアイコンを初期化してしまうので対処できない。

あと、僕自身がそこまでjavascriptに詳しくない。

その状況時にはアイコンが赤くなるようにした。

呼び出し例

code:script.js

import '/api/code/Mijinko/input_mode_UserScript/script.js';

code:style.css

@import url('/api/code/Mijinko/input_mode_UserScript/style.css');

スクリプト本体

code:script.js

let isInputMode = true;

const enterInputMode = (e) => {

if (!isInputMode) {

if (e) {

e.preventDefault();

}

$("#text-input").prop('disabled', false);

$("#text-input").focus();

$('#InputMode img').removeClass("disable");

$('#InputMode img').addClass("enable");

isInputMode = !isInputMode;

}

}

const exitInputMode = (e) => {

if (isInputMode) {

$("#text-input").prop('disabled', true);

$('#InputMode img').removeClass("enable");

$('#InputMode img').addClass("disable");

isInputMode = !isInputMode;

}

}

const modeSelectors = {

true: exitInputMode,

false: enterInputMode,

}

scrapbox.PageMenu.addMenu({

title: 'InputMode',

onClick: () => {

},

});

$(window).keydown((e) => {

if (e.keyCode === 73) { // key code of "i"

enterInputMode(e);

}

if (e.keyCode === 27) { // key code of Esc

exitInputMode(e);

}

});

exitInputMode();

code:style.css

transition: 0.3s;

filter: sepia(95%) saturate(6932%) hue-rotate(360deg) brightness(65%) contrast(112%);

}

filter: sepia(0%) saturate(0%) hue-rotate(200deg) brightness(100%) contrast(112%);

}

filter: sepia(95%) saturate(6932%) hue-rotate(200deg) brightness(120%) contrast(112%);

}

メモ